import React, { Component } from 'react';

import {
    View,
    Text,
    Image,
    Alert,
    StyleSheet,
    TouchableOpacity,
    TouchableHighlight
} from 'react-native';
import NavigationBar from "../../common/NavigationBar";
import ViewUtil from "../../util/ViewUtil";
import LanguageDao, { FLAG_LANGUAGE } from "../../expand/Dao/LanguageDao";
import SortableListView from 'react-native-sortable-listview'
import ArrayUtil from "../../util/ArrayUtil";

export default class SortKeysPage extends Component {
    constructor (props) {
        super(props)
        this.languageDao = new LanguageDao(this.props.flag)
        this.dataArray = []
        this.originalCheckedArray = []
        this.state = {
            checkedArray: [],
        }
    }

    componentDidMount () {
        this.loadData()
    }

    loadData () {
        this.languageDao.fetch()
            .then(result => {
                this.getCheckedItems(result)
            })
            .catch(error => {
                console.warn(error)
            })
    }

    getCheckedItems (result) {
        this.dataArray = result
        let checkedArray = result.filter((val, i, arr) => {
            if (val.checked) {
                return val
            }
        })

        this.setState({
            checkedArray: checkedArray
        })
        this.originalCheckedArray = ArrayUtil.clone(checkedArray)
    }

    onBack () {
        if (ArrayUtil.isEqual(this.originalCheckedArray, this.state.checkedArray)) {
            this.props.navigator.pop();
            return;
        }
        Alert.alert(
            '提示',
            '要保存修改吗？',
            [
                {
                    text: '不保存',
                    onPress: () => {
                        this.props.navigator.pop();
                    },
                    style: 'cancel'
                },
                {
                    text: '保存',
                    onPress: () => {
                        this.onSave()
                    },

                }
            ]
        )
    }

    onSave () {
        if (ArrayUtil.isEqual(this.originalCheckedArray, this.state.checkedArray)) {
            this.props.navigator.pop();
            return;
        }

        let cloneDataArray = ArrayUtil.clone(this.dataArray)
        this.originalCheckedArray.forEach((val,i,arr)=>{
            this.dataArray[cloneDataArray.indexOf(val)] = this.state.checkedArray[i]
        })

        this.languageDao.save(this.dataArray)
        this.props.navigator.pop();
    }

    render () {
        let data = this.state.checkedArray
        let order = Object.keys(data) //Array of keys

        let rightButton = (
            <TouchableOpacity
                onPress={() => {
                    this.onSave()
                }}
            >
                <View style={{ margin: 10 }}>
                    <Text style={styles.title}>保存</Text>
                </View>
            </TouchableOpacity>
        )
        return (
            <View style={{ flex: 1 }}>
                <NavigationBar
                    title='排序'
                    leftButton={ViewUtil.goBackButton(() => this.onBack())}
                    rightButton={rightButton}
                />
                <SortableListView
                    style={{ flex: 1 }}
                    data={this.state.checkedArray}
                    order={order}
                    onRowMoved={e => {
                        this.state.checkedArray.splice(e.to, 0, this.state.checkedArray.splice(e.from, 1)[ 0 ])
                    }}
                    renderRow={row => <RowComponent data={row}/>}
                />
            </View>
        )
    }
}

class RowComponent extends React.Component {
    render () {
        return (
            <TouchableHighlight
                underlayColor={'#eee'}
                style={styles.items}
                {...this.props.sortHandlers}
            >
                <View style={styles.row}>
                    <Image style={styles.image} source={require('../../../res/images/ic_sort.png')}/>
                    <Text>{this.props.data.name}</Text>
                </View>

            </TouchableHighlight>
        )
    }
}

const styles = StyleSheet.create({
    title: {
        fontSize: 20,
        color: 'white'
    },
    items: {
        padding: 20,
        backgroundColor: '#F8F8F8',
        borderBottomWidth: 1,
        borderColor: '#eee',
    },
    row: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    image: {
        tintColor: '#2196F3',
        height: 16,
        width: 16,
        marginRight: 10
    }
})